<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>应用详情</title>
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
    />
    <link rel="stylesheet" href="../css/style.css" />
    <style>
      /* 应用详情页特定样式 */
      .download-progress {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 100%;
        width: 0;
        background-color: rgba(0, 122, 255, 0.2);
        border-radius: 20px;
        transition: width 2s ease-in-out;
      }

      .screenshot-gallery {
        display: flex;
        overflow-x: auto;
        gap: 12px;
        padding: 0 16px 16px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }

      .screenshot-gallery::-webkit-scrollbar {
        display: none;
      }

      .screenshot {
        flex: 0 0 auto;
        width: 280px;
        height: 500px;
        border-radius: 16px;
        object-fit: cover;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }

      .review-stars {
        display: flex;
        align-items: center;
        gap: 4px;
      }

      .rating-bar {
        width: 100%;
        height: 6px;
        background-color: var(--extra-light-gray);
        border-radius: 3px;
        margin-top: 4px;
      }

      .rating-fill {
        height: 100%;
        background-color: var(--primary-color);
        border-radius: 3px;
      }

      .rating-5 .rating-fill {
        width: 70%;
      }
      .rating-4 .rating-fill {
        width: 20%;
      }
      .rating-3 .rating-fill {
        width: 5%;
      }
      .rating-2 .rating-fill {
        width: 3%;
      }
      .rating-1 .rating-fill {
        width: 2%;
      }

      .app-detail-download-btn {
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--primary-color);
        color: white;
        font-weight: 600;
        border: none;
        padding: 8px 20px;
        border-radius: 20px;
        font-size: 16px;
        cursor: pointer;
        transition: all 0.2s ease;
        width: 100%;
        margin-top: 10px;
      }
    </style>
    <script>
      // 设置当前时间
      document.addEventListener("DOMContentLoaded", function () {
        const timeElement = document.querySelector(".time");
        const now = new Date();
        const hours = now.getHours().toString().padStart(2, "0");
        const minutes = now.getMinutes().toString().padStart(2, "0");
        timeElement.textContent = `${hours}:${minutes}`;
      });
    </script>
  </head>
  <body>
    <div class="iphone-container">
      <!-- iOS 状态栏 -->
      <div class="status-bar">
        <div class="status-bar-icons">
          <span class="time">14:30</span>
        </div>
        <div class="status-bar-icons">
          <i class="fas fa-signal"></i>
          <i class="fas fa-wifi ml-2"></i>
          <i class="fas fa-battery-full ml-2"></i>
        </div>
      </div>

      <!-- 标题栏 -->
      <div
        class="flex justify-between items-center px-4 py-2 border-b border-gray-200 bg-white sticky top-0 z-10"
      >
        <button class="icon-button">
          <i class="fas fa-arrow-left"></i>
        </button>
        <div class="flex space-x-4">
          <button class="icon-button">
            <i class="fas fa-share-alt"></i>
          </button>
          <button class="icon-button">
            <i class="fas fa-ellipsis-v"></i>
          </button>
        </div>
      </div>

      <!-- 主要内容区域 -->
      <div class="content bg-white pb-8">
        <!-- 应用基本信息 -->
        <div class="flex p-4">
          <img
            src="https://is1-ssl.mzstatic.com/image/thumb/Purple116/v4/05/16/67/051667e1-3d48-6978-51d4-90a57b4419e7/AppIcon-0-0-1x_U007emarketing-0-0-0-7-0-0-sRGB-0-0-0-GLES2_U002c0-512MB-85-220-0-0.png/460x0w.webp"
            alt="应用图标"
            class="w-20 h-20 rounded-xl mr-4"
          />
          <div class="flex-1">
            <div class="text-xl font-bold">原神</div>
            <div class="text-sm text-gray-500 mt-1">
              米哈游科技（上海）有限公司
            </div>
            <div class="flex items-center mt-2">
              <div class="flex">
                <i class="fas fa-star text-yellow-400"></i>
                <i class="fas fa-star text-yellow-400"></i>
                <i class="fas fa-star text-yellow-400"></i>
                <i class="fas fa-star text-yellow-400"></i>
                <i class="fas fa-star-half-alt text-yellow-400"></i>
              </div>
              <span class="text-sm text-gray-500 ml-1">4.5 (23.8万评价)</span>
            </div>
            <div class="flex items-center mt-1 text-xs text-gray-500">
              <span>2亿次下载</span>
              <span class="mx-2">·</span>
              <span>3.4GB</span>
              <span class="mx-2">·</span>
              <span>免费</span>
              <span class="mx-2">·</span>
              <span>应用内购买</span>
            </div>
          </div>
        </div>

        <!-- 下载按钮 -->
        <div class="px-4">
          <button id="downloadBtn" class="app-detail-download-btn">
            <span class="download-text">获取</span>
            <div class="download-progress"></div>
          </button>
        </div>

        <!-- 应用截图 -->
        <div class="mt-4">
          <div class="section-title px-4">
            <span>应用截图</span>
          </div>
          <div class="screenshot-gallery">
            <img
              src="https://is5-ssl.mzstatic.com/image/thumb/PurpleSource116/v4/00/ee/3a/00ee3a5c-0e41-dc49-80e6-02f1174f9cf7/43f119e0-9eb5-48ef-a169-dc79f3a3152c_CN_00.jpg/600x0w.webp"
              alt="应用截图"
              class="screenshot"
            />
            <img
              src="https://is1-ssl.mzstatic.com/image/thumb/PurpleSource126/v4/85/f5/53/85f55384-c1b5-0d44-3eac-5b54a699e3cd/67cd3a1a-4b23-4d0e-9bc9-7e8ef8c8a969_CN_01.jpg/600x0w.webp"
              alt="应用截图"
              class="screenshot"
            />
            <img
              src="https://is2-ssl.mzstatic.com/image/thumb/PurpleSource116/v4/31/29/ea/3129ea2e-f623-feaa-f6da-fa31d8cb9868/584aa705-12c8-41a1-a197-5bbe4aa07832_CN_02.jpg/600x0w.webp"
              alt="应用截图"
              class="screenshot"
            />
            <img
              src="https://is5-ssl.mzstatic.com/image/thumb/PurpleSource116/v4/da/42/24/da422462-4241-c9de-5f26-54e6f53c0dfd/8a08b1c0-8415-4ed7-a1e3-fae5e53609a3_CN_03.jpg/600x0w.webp"
              alt="应用截图"
              class="screenshot"
            />
          </div>
        </div>

        <!-- 特色功能与演示 -->
        <div class="mt-6 px-4">
          <div class="section-title">
            <span>特色功能</span>
          </div>
          <div class="bg-gray-50 rounded-lg overflow-hidden">
            <!-- 特色功能展示视频，用图片模拟 -->
            <div class="relative">
              <img
                src="https://is5-ssl.mzstatic.com/image/thumb/PurpleSource116/v4/00/ee/3a/00ee3a5c-0e41-dc49-80e6-02f1174f9cf7/43f119e0-9eb5-48ef-a169-dc79f3a3152c_CN_00.jpg/600x0w.webp"
                alt="游戏演示"
                class="w-full h-48 object-cover"
              />
              <div class="absolute inset-0 flex items-center justify-center">
                <div
                  class="w-16 h-16 bg-white bg-opacity-80 rounded-full flex items-center justify-center"
                >
                  <i class="fas fa-play text-blue-500 text-xl"></i>
                </div>
              </div>
            </div>
            <div class="p-4">
              <div class="font-bold">开放世界冒险玩法</div>
              <p class="text-sm text-gray-600 mt-2">
                探索广阔的开放世界，体验自由的冒险玩法。游戏拥有丰富的地图资源和独特的元素反应系统，让每次探索都充满惊喜。
              </p>
            </div>
          </div>
        </div>

        <!-- 版本信息 -->
        <div class="mt-6 px-4">
          <div class="section-title">
            <span>版本信息</span>
          </div>
          <div class="bg-white rounded-lg">
            <div
              class="flex justify-between items-center py-3 border-b border-gray-100"
            >
              <div class="font-medium">当前版本</div>
              <div class="text-gray-500">4.3.0</div>
            </div>
            <div class="py-3 border-b border-gray-100">
              <div class="font-medium">更新内容</div>
              <div class="text-sm text-gray-600 mt-2">
                1. 新增角色「菲米尼」和「夏洛蒂」<br />
                2. 新增地图「枫丹廷宫」<br />
                3. 优化游戏性能，提升加载速度<br />
                4. 修复已知问题
              </div>
            </div>
            <div
              class="flex justify-between items-center py-3 border-b border-gray-100"
            >
              <div class="font-medium">更新日期</div>
              <div class="text-gray-500">2025年2月28日</div>
            </div>
            <div class="flex justify-between items-center py-3">
              <div class="font-medium">兼容性</div>
              <div class="text-gray-500">需要iOS 14.0或更高版本</div>
            </div>
          </div>
        </div>

        <!-- 应用介绍 -->
        <div class="mt-6 px-4">
          <div class="section-title">
            <span>应用介绍</span>
          </div>
          <div class="app-description">
            <p class="mb-4">
              《原神》是一款开放世界冒险RPG游戏。游戏发生在一个被称作「提瓦特」的幻想世界，在这里，被神选中的人将被授予「神之眼」，导引元素之力。你将扮演一位名为「旅行者」的神秘角色，在自由的旅行中邂逅性格各异、能力独特的同伴们，和他们一起击败强敌，找回失散的亲人——同时，逐步发掘「原神」的真相。
            </p>

            <h3 class="font-bold text-lg mt-4 mb-2">【自由的开放世界】</h3>
            <p class="mb-4">
              在广阔的世界中自由探索，踏遍山川河谷、林海雪原，攀爬陡峭的高山，领略绝美的风景。沿途还有各种谜题与隐藏宝藏等你解锁。
            </p>

            <h3 class="font-bold text-lg mt-4 mb-2">【元素魔法战斗系统】</h3>
            <p class="mb-4">
              掌握「风、雷、火、冰、草、岩、水」七种元素之力，触发元素之间奇妙的相互作用，创造包括燃烧、冻结、导电、扩散等在内的多样元素反应。
            </p>

            <h3 class="font-bold text-lg mt-4 mb-2">【多人联机冒险】</h3>
            <p class="mb-4">
              与好友组队，一起探索充满敌人和宝藏的多样地牢，获取丰富奖励。
            </p>

            <h3 class="font-bold text-lg mt-4 mb-2">
              【持续更新的剧情与活动】
            </h3>
            <p>
              游戏将不断推出新的地图区域、角色、剧情任务和限时活动，让玩家的冒险永不停歇。
            </p>
          </div>
          <button class="text-blue-500 font-medium mt-2">展开更多</button>
        </div>

        <!-- 评分与评价 -->
        <div class="mt-6 px-4">
          <div class="section-title">
            <span>评分与评价</span>
            <span class="section-more">查看全部</span>
          </div>
          <div class="flex items-center">
            <div class="text-center mr-6">
              <div class="text-4xl font-bold">4.5</div>
              <div class="text-xs text-gray-500 mt-1">满分 5 分</div>
            </div>
            <div class="flex-1">
              <div class="flex items-center mb-1">
                <div class="text-xs w-6 text-right mr-2">5星</div>
                <div
                  class="h-2 flex-1 bg-gray-200 rounded-full overflow-hidden"
                >
                  <div
                    class="h-full bg-yellow-400 rounded-full"
                    style="width: 70%"
                  ></div>
                </div>
              </div>
              <div class="flex items-center mb-1">
                <div class="text-xs w-6 text-right mr-2">4星</div>
                <div
                  class="h-2 flex-1 bg-gray-200 rounded-full overflow-hidden"
                >
                  <div
                    class="h-full bg-yellow-400 rounded-full"
                    style="width: 20%"
                  ></div>
                </div>
              </div>
              <div class="flex items-center mb-1">
                <div class="text-xs w-6 text-right mr-2">3星</div>
                <div
                  class="h-2 flex-1 bg-gray-200 rounded-full overflow-hidden"
                >
                  <div
                    class="h-full bg-yellow-400 rounded-full"
                    style="width: 5%"
                  ></div>
                </div>
              </div>
              <div class="flex items-center mb-1">
                <div class="text-xs w-6 text-right mr-2">2星</div>
                <div
                  class="h-2 flex-1 bg-gray-200 rounded-full overflow-hidden"
                >
                  <div
                    class="h-full bg-yellow-400 rounded-full"
                    style="width: 3%"
                  ></div>
                </div>
              </div>
              <div class="flex items-center">
                <div class="text-xs w-6 text-right mr-2">1星</div>
                <div
                  class="h-2 flex-1 bg-gray-200 rounded-full overflow-hidden"
                >
                  <div
                    class="h-full bg-yellow-400 rounded-full"
                    style="width: 2%"
                  ></div>
                </div>
              </div>
            </div>
          </div>

          <!-- 精选评价 -->
          <div class="mt-4">
            <div class="border border-gray-100 rounded-lg p-4 mb-3">
              <div class="flex justify-between mb-2">
                <div class="flex items-center">
                  <img
                    src="https://randomuser.me/api/portraits/women/22.jpg"
                    alt="用户头像"
                    class="w-8 h-8 rounded-full mr-2"
                  />
                  <div>
                    <div class="text-sm font-medium">王晓华</div>
                    <div class="text-xs text-gray-500">2025-02-30</div>
                  </div>
                </div>
                <div class="flex text-yellow-400">
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                </div>
              </div>
              <p class="text-sm">
                画面非常精美，玩法也很有趣。每个角色都有独特的故事背景和技能，让人欲罢不能。唯一的缺点是抽卡概率有点低，但总体来说是一款值得推荐的游戏！
              </p>
            </div>
            <div class="border border-gray-100 rounded-lg p-4">
              <div class="flex justify-between mb-2">
                <div class="flex items-center">
                  <img
                    src="https://randomuser.me/api/portraits/men/67.jpg"
                    alt="用户头像"
                    class="w-8 h-8 rounded-full mr-2"
                  />
                  <div>
                    <div class="text-sm font-medium">张伟</div>
                    <div class="text-xs text-gray-500">2025-02-25</div>
                  </div>
                </div>
                <div class="flex text-yellow-400">
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="far fa-star"></i>
                </div>
              </div>
              <p class="text-sm">
                最新版本增加的新地图非常震撼，探索要素丰富，解谜也很有趣。战斗系统的元素反应很有深度，可以搭配出各种不同的战术。希望未来能减少一些重复性的日常任务，整体体验会更好。
              </p>
            </div>
          </div>
        </div>

        <!-- 开发者信息 -->
        <div class="mt-6 px-4">
          <div class="section-title">
            <span>开发者</span>
          </div>
          <div
            class="flex justify-between items-center py-3 border-b border-gray-100"
          >
            <div class="font-medium">米哈游科技（上海）有限公司</div>
            <i class="fas fa-chevron-right text-gray-300"></i>
          </div>
          <div class="flex justify-between items-center py-3">
            <div class="flex">
              <i class="fas fa-globe text-gray-500 mr-2"></i>
              <div class="text-blue-500">开发者网站</div>
            </div>
            <i class="fas fa-chevron-right text-gray-300"></i>
          </div>
        </div>

        <!-- 猜你喜欢 -->
        <div class="mt-6 px-4">
          <div class="section-title">
            <span>猜你喜欢</span>
            <span class="section-more">查看全部</span>
          </div>
          <div class="flex overflow-x-auto pb-4 space-x-4">
            <div class="flex-shrink-0 w-32">
              <img
                src="https://is1-ssl.mzstatic.com/image/thumb/Purple126/v4/77/17/65/771765f7-29e1-7ba7-d1bd-ec04480c70a7/AppIcon-0-0-1x_U007emarketing-0-0-0-7-0-0-sRGB-0-0-0-GLES2_U002c0-512MB-85-220-0-0.png/460x0w.webp"
                alt="应用图标"
                class="w-20 h-20 rounded-xl mx-auto"
              />
              <div class="text-xs text-center mt-2 line-clamp-2 font-medium">
                王者荣耀
              </div>
              <div class="text-xs text-center text-gray-500">MOBA</div>
            </div>
            <div class="flex-shrink-0 w-32">
              <img
                src="https://is1-ssl.mzstatic.com/image/thumb/Purple116/v4/e7/38/85/e738855e-7637-3d47-6853-a144b8db3cf3/AppIcon-0-0-1x_U007emarketing-0-0-0-7-0-0-sRGB-0-0-0-GLES2_U002c0-512MB-85-220-0-0.png/460x0w.webp"
                alt="应用图标"
                class="w-20 h-20 rounded-xl mx-auto"
              />
              <div class="text-xs text-center mt-2 line-clamp-2 font-medium">
                QQ音乐
              </div>
              <div class="text-xs text-center text-gray-500">音乐</div>
            </div>
            <div class="flex-shrink-0 w-32">
              <img
                src="https://is5-ssl.mzstatic.com/image/thumb/Purple116/v4/d9/12/b8/d912b8d1-2891-e827-e0c9-11e5990e9450/AppIcon-0-0-1x_U007emarketing-0-0-0-7-0-0-sRGB-0-0-0-GLES2_U002c0-512MB-85-220-0-0.png/460x0w.webp"
                alt="应用图标"
                class="w-20 h-20 rounded-xl mx-auto"
              />
              <div class="text-xs text-center mt-2 line-clamp-2 font-medium">
                和平精英
              </div>
              <div class="text-xs text-center text-gray-500">射击游戏</div>
            </div>
            <div class="flex-shrink-0 w-32">
              <img
                src="https://is1-ssl.mzstatic.com/image/thumb/Purple126/v4/8a/c5/aa/8ac5aa9e-4fb8-33ea-1cea-e20d4a6f2389/AppIcon-0-0-1x_U007emarketing-0-0-0-10-0-0-sRGB-0-0-0-GLES2_U002c0-512MB-85-220-0-0.png/460x0w.webp"
                alt="应用图标"
                class="w-20 h-20 rounded-xl mx-auto"
              />
              <div class="text-xs text-center mt-2 line-clamp-2 font-medium">
                崩坏：星穹铁道
              </div>
              <div class="text-xs text-center text-gray-500">角色扮演</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部导航栏 -->
      <div class="tab-bar">
        <div class="tab-item">
          <i class="fas fa-home"></i>
          <span>首页</span>
        </div>
        <div class="tab-item">
          <i class="fas fa-compass"></i>
          <span>发现</span>
        </div>
        <div class="tab-item active">
          <i class="fas fa-download"></i>
          <span>下载</span>
        </div>
        <div class="tab-item">
          <i class="fas fa-user"></i>
          <span>我的</span>
        </div>
      </div>
    </div>

    <!-- JavaScript -->
    <script src="../js/main.js"></script>
    <script>
      // 应用详情页特定的JavaScript
      document.addEventListener("DOMContentLoaded", function () {
        const downloadBtn = document.getElementById("downloadBtn");
        const downloadText = downloadBtn.querySelector(".download-text");
        const downloadProgress =
          downloadBtn.querySelector(".download-progress");

        let isDownloading = false;
        let isInstalled = false;

        // 下载按钮点击事件
        downloadBtn.addEventListener("click", function () {
          if (isInstalled) {
            // 如果已安装，则打开应用
            showToast("正在打开原神...");
            return;
          }

          if (isDownloading) return; // 如果正在下载，不执行任何操作

          isDownloading = true;
          downloadText.textContent = "下载中...";

          // 显示下载进度
          downloadProgress.style.width = "0%";
          setTimeout(() => {
            downloadProgress.style.width = "30%";

            setTimeout(() => {
              downloadProgress.style.width = "60%";

              setTimeout(() => {
                downloadProgress.style.width = "100%";

                // 下载完成，开始安装
                setTimeout(() => {
                  downloadText.textContent = "安装中...";

                  // 安装完成
                  setTimeout(() => {
                    isDownloading = false;
                    isInstalled = true;
                    downloadText.textContent = "打开";
                    downloadBtn.style.backgroundColor = "#f2f2f7";
                    downloadBtn.style.color = "#34c759";
                    downloadProgress.style.display = "none";

                    // 显示安装完成提示
                    showToast("原神已安装成功");
                  }, 1500);
                }, 500);
              }, 800);
            }, 1200);
          }, 300);
        });

        // 屏幕截图点击预览
        const screenshots = document.querySelectorAll(".screenshot");
        screenshots.forEach(screenshot => {
          screenshot.addEventListener("click", function () {
            // 在真实应用中，这里会打开全屏预览
            showToast("查看截图大图");
          });
        });
      });
    </script>
  </body>
</html>
